<!-- 购买签署流量弹层 -->
<template>
  <view>
    <uni-popup
      class="buyflow-popup"
      ref="buyflowRef"
      visible="{{ buyFlowShow }}"
      showMask="{{true}}"
      type="bottom"
      @close="handleClose"
    >
      <view class="buyflow-content safe-area">
        <view class="buyflow-title"> 购买借条签署包 </view>
        <view class="buyflow-close1">
          <uni-icons
            class="icon"
            type="close"
            color="#1677ff"
            size="small"
            @click="handleClose"
          ></uni-icons>
        </view>
        <view class="flow-card">
          <view class="card-title"> 电子借条签署包1份 </view>
          <view class="card-price">
            ￥{{ (goodInfo.currentPrice / 100).toFixed(2) }}
          </view>
          <view class="card-info">
            <view class="card-item">
              使用期限：
              <!-- <text>付款后{{goodInfo.validityPeriodDay}}天内，逾期自动退款</text> -->
              <text
                >付款后{{ goodInfo.validityPeriodDay }}天内未使用自动退款</text
              >
            </view>
            <!-- <view class="card-item">
            生效期间：立即生效
          </view> -->
          </view>
        </view>
        <view class="buy-info">
          <view class="buy-label"> 购买份数 </view>
          <stepper
            disabled
            inputReadOnly
            defaultValue="{{ buyCount }}"
            min="{{ 1 }}"
            max="{{ 999 }}"
            step="{{ 1 }}"
            onChange="handleChange"
          />
        </view>
        <view class="buy-total">
          总价：
          <text
            >￥{{ ((goodInfo.currentPrice * buyCount) / 100).toFixed(2) }}</text
          >
        </view>
        <view>
          <view class="buy-read">
            <checkbox @change="handleReadChange" :checked="hasRead"> </checkbox>
            我已阅读并同意
            <text onTap="handleJumpRead">《服务协议》</text>
          </view>
          <button type="primary" @click="handleBuyNow" class="buyflow-btn">
            立即支付
          </button>
        </view>
      </view>
    </uni-popup>
    <!-- 使用须知弹层 -->
    <uni-popup
      class="notice-popup"
      ref="noticeRef"
      visible="{{ useNoticeShow }}"
      type="bottom"
      @close="handleUseNoticeClose"
    >
      <view class="notice-content safe-area">
        <view class="notice-close">
          <uni-icons type="CloseOutline" @click="handleUseNoticeClose">
          </uni-icons>
        </view>
        <view class="notice-title">
          {{ articleInfo.title }}
        </view>
        <scroll-view
          scroll-y
          class="notice-view"
          disable-lower-scroll="out-of-bounds"
          disable-upper-scroll="out-of-bounds"
        >
          <rich-text nodes="{{articleInfo.content}}" @click="tap"></rich-text>
        </scroll-view>
        <view>
          <view type="primary" @click="handleAgreeNotice" class="notice-btn">
            我已理解并接受上述内容
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 使用须知弹层 -->
  </view>
</template>

<script>
import {
  apiSignPackagePage,
  apiCreateOrder,
  apiArticleById,
} from "@/api/common";
import { throttle } from "@/utils/common";
export default {
  data() {
    return {
      useNoticeShow: false,
      goodInfo: {}, //套餐
      buyFlowShow: false,
      buyCount: 1,
      hasRead: false,
      pageNo: 1,
      pageSize: 1,
      articleInfo: {
        title: "",
        content: "",
      },
    };
  },
  computed: {
    hasRead() {
      return this.$store.state.payFlowRead;
    },
  },
  mounted() {},
  methods: {
    // 加载数据
    getData(cb) {
      const { pageNo, pageSize } = this;
      const apply = {
        pageNo,
        pageSize,
      };
      apiSignPackagePage(apply).then((res) => {
        if (res.code == 200) {
          this.goodInfo = res.data.records && res.data.records[0];
          cb && cbs();
        }
      });
    },
    getArticle() {
      apiArticleById({
        articleIdList: 4,
      }).then((res) => {
        if (res.code === 200 && res.data && res.data.length > 0) {
          this.articleInfo = {
            id: 4,
            title: res.data[0].articleTitle,
            content: res.data[0].articleDetails,
          };
        }
      });
    },
    handleJumpRead() {
      uni.navigateTo({
        url: "/pages/article/article?type=serviceAgree&id=4",
      });
    },
    // 展示、关闭---使用须知
    handleUseNoticeClose() {
      this.useNoticeShow = !this.useNoticeShow;
      if (this.useNoticeShow) {
        this.$refs.noticeRef.open();
      } else {
        this.$refs.noticeRef.close();
      }
    },
    // 同意---使用协议
    handleAgreeNotice() {
      this.useNoticeShow = false;
      this.$refs.noticeRef.close();
      this.$store.dispatch("SET_PAYFLOWREAD", true);
    },
    // 立即购买流量
    handleBuyNow: throttle(function () {
      const _this = this;
      // 是否阅读服务协议
      console.log(this.buyCount);
      const { hasRead } = _this;
      if (!hasRead) {
        uni.showToast({
          type: "none",
          content: "请阅读并同意服务协议",
          duration: 3000,
          success: () => {},
        });
        return false;
      }
      const apply = {
        buySignPackageInfoList: [
          {
            count: this.buyCount,
            signPackageId: this.goodInfo.signPackageId,
          },
        ],
      };
      apiCreateOrder(apply).then((result) => {
        if (result.code === 200) {
          // #ifdef MP-ALIPAY
          my.tradePay({
            // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
            tradeNO: result.data,
            success: (res) => {
              const { resultCode } = res;
              console.log(res);
              if (resultCode == 9000) {
                uni.showToast({
                  content: "充值成功",
                  duration: 3000,
                  mask: true,
                });
                _this.handleClose();
                // 订单回传授权
                uni.getAuthCode({
                  // 订单服务授权：order_service。如需同时获取用户多项授权，可在 scopes 中传入多个 scope 值。
                  scopes: ["order_service"],
                  success: (authRes) => {
                    // 订单服务授权成功
                    console.log(authRes, "订单服务授权成功");
                    _this.$emit("onPay", res);
                  },
                  fail: (authFail) => {
                    // 订单服务授权失败，根据自己的业务场景来进行错误处理
                    console.log(
                      authFail,
                      "订单服务授权失败，根据自己的业务场景来进行错误处理"
                    );
                    _this.$emit("onPay", res);
                  },
                });
              } else {
                uni.showToast({
                  content: "充值失败",
                  duration: 3000,
                  mask: true,
                });
              }
            },
            fail: (res) => {
              _this.$emit("onError", res);
            },
          });
          // #endif
        }
      });
    }, 1000),
    // 展开购买流量弹窗
    handleOpen() {
      this.getData(() => {
        this.$refs.buyflowRef.open();
      });
    },
    // 关闭购买流量弹窗
    handleClose() {
      this.$refs.buyflowRef.close();
    },
    // 加购
    handleChange(e) {
      this.buyCount = e;
    },

    // 流量购买---服务协议阅读
    handleReadChange(e) {
      this.$store.dispatch("payFlowRead", e);
    },
  },
};
</script>
<style lang="scss" scoped>
/* 流量购买弹层 */
.buyflow-content {
  width: 100vw;
  height: 943rpx;
  padding: 0 24rpx 0;
  box-sizing: border-box;
  position: relative;
}

.buyflow-close1 {
  width: 36rpx;
  height: 36rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.buyflow-title {
  height: 50rpx;
  font-size: 36rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 50rpx;
  font-weight: bold;
  text-align: center;
  border-bottom: 1rpx solid #eeeeee;
  padding: 24rpx;
}

.flow-card {
  width: 702rpx;
  height: 256rpx;
  border-radius: 20rpx;
  background-image: url(../../images/flow-card.png);
  background-size: contain;
  padding: 24rpx;
  box-sizing: border-box;
  margin: 24rpx auto 44rpx;
  overflow: hidden;
  position: relative;
}

.card-title {
  height: 30rpx;
  font-size: 22rpx;
  font-family: PingFangSC, PingFang SC;
  color: #333333;
  line-height: 30rpx;
  margin-bottom: 24rpx;
}

.card-price {
  height: 78rpx;
  font-size: 56rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 78rpx;
}

.card-info {
  width: 100%;
  height: 58rpx;
  background: #d9eeff;
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 0 0 0 24rpx;
  box-sizing: border-box;
}

.card-info .card-item {
  flex: 1;
  height: 30rpx;
  font-size: 22rpx;
  font-family: PingFangSC, PingFang SC;
  color: #333333;
  line-height: 30rpx;
}

.card-info .card-item text {
  color: #ff3141;
}

.buy-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #eee;
}

.buy-total {
  height: 37rpx;
  font-size: 26rpx;
  font-family: PingFangSC, PingFang SC;
  color: #333333;
  line-height: 37rpx;
  margin-top: 24rpx;
  text-align: right;
  margin-bottom: 90rpx;
}

.buy-total text {
  margin-left: 37rpx;
  color: #ff3141;
  font-weight: bold;
}

.buy-read {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  color: #333333;
  line-height: 42rpx;
  margin-bottom: 65rpx !important;
  display: flex;
}

.buy-read text {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC, PingFang SC;
  color: #1677ff;
  line-height: 42rpx;
}

.buyflow-btn {
  margin-bottom: 24rpx;
}

/* 流量购买弹层 */

/* 使用须知弹层 */
.notice-content {
  position: relative;
}

.notice-view {
  width: 100vw;
  padding: 24rpx 24rpx 0;
  box-sizing: border-box;
  height: 888rpx;
}

.notice-close {
  width: 36rpx;
  height: 36rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.notice-title {
  height: 50rpx;
  font-size: 36rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 50rpx;
  font-weight: bold;
  text-align: center;
  border-bottom: 1rpx solid #eeeeee;
  padding: 24rpx;
}

.notice-btn {
  width: 702rpx !important;
  height: 98rpx;
  font-size: 36rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 98rpx;
  text-align: center;
  background: #1677ff;
  border-radius: 8rpx;
  margin-top: 108rpx;
  margin-left: 24rpx;
  margin-bottom: 24rpx;
}

/* 使用须知弹层 */
</style>
